<template>
  <q-dialog v-model="show" persistent>
    <q-card v-drag class="dialog-content halt-detail" style="min-width: 1000px; max-height: 500px">
      <q-card-section class="dialog-title bg-primary" >
        <div class="text-center text-white dialog-title">
          <q-btn
            style="font-size: 18px;color: white"
            flat round dense
            class="iconfont icontubiao-67 white close-btn dialog"
            @click="$emit('close')"
          />
          <span class="font-size-16">
            停机时长明细
          </span>
        </div>
      </q-card-section>
      <q-card-section style="padding: 0">
        <q-table
          class="users-table scroll my-sticky-virt scroll-table"
          :columns="tableColumns"
          :data="tableData"
          row-key="id"
          :pagination.sync="pagination"
          no-data-label="暂无数据"
          color="primary"
          hide-bottom
          style="max-height: 400px"
        />
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script>
export default {
  name: 'halt-detail',
  props: {
    show: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data () {
    return {
      // 表格不分页
      pagination: {
        rowsPerPage: 0
      },
      // 表格列
      tableColumns: [
        { name: 'stopBy', field: 'stopBy', label: '停机人', align: 'left' },
        { name: 'type', field: 'type', label: '停机类型', align: 'left' },
        { name: 'reason', field: 'reason', label: '停机原因', align: 'left' },
        { name: 'duration', field: 'duration', label: '停机时长', align: 'left' }
      ],
      tableData: []
    }
  },
  methods: {
    assignment (val) {
      this.tableData = val
    }
  }
}
</script>

<style scoped lang="stylus">

</style>
